<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.bracket.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Turniermaster</title>
    </head>
    <body>
        <div id="black-top"></div>
        <div id="nav-top">
            <button id="btn-top-left"></button>
            <button id="btn-top-right"></button>
            <h1></h1>
        </div>
        <div id="notification">
            <p></p>
        </div>
        <div id="wrapper"></div>
        <div id="nav-bottom">
            <button id="btn-tableView"><div class="span-icon"><span class="glyphicon glyphicon-list"></span></div>Tabelle</button>
            <button id="btn-treeView"><div class="span-icon"><span class="glyphicon glyphicon-tree-deciduous"></span></div>Baum</button>
            <button id="btn-rankingView"><div class="span-icon"><span class="glyphicon glyphicon-star"></span></div>Rangfolge</button>
            <button id="btn-editView"><div class="span-icon"><span class="glyphicon glyphicon-pencil"></span></div>Ergebnis</button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="messageModal">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Fehler</h4>
                </div>
                <div class="modal-body">
                    <p>Fehlermeldung</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
                </div>
            </div>
          </div>
        </div>
        <script type="text/javascript" src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/underscore.js"></script>
        <script type="text/javascript" src="js/backbone.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/jquery.bracket.min.js"></script>
        <script type="text/javascript" src="js/client.js"></script>
        <script type="text/javascript" src="js/indexView.js"></script>
        <script type="text/template" id="template-homeView">
        <div id="joinView">
            <% if(!rc.list || rc.list.length < 1) { %>
            <h3>Noch kein Turnier erstellt. Bitte ein neues anlegen</h3>
            <% } else { %>
            <h3>Turnier beitreten oder Administrieren</h3>
            <form role="form">
                <label>Turnier:</label>
                <select id="select_tournamentList">
                    <option value="-1">bitte Turnier wählen...</option>
                    <% _.each(rc.list, function(item) { %>
                    <option value="<%= item._id %>"><%= item.tournament.name %></option>
                    <% }); %>
                </select>
                <button type="button" id="joinTournament">Beitreten</button>
                <label>Passwort:</label>
                <input type="password" id="password_admin_existing" />
                <button type="button" id="adminExistingTournament">Verwalten</button>
            </form>
            <% } %>
        </div>
        </script>
        <script type="text/template" id="template-createView">
        <div id="createView">
            <h2>Neues Turnier erstellen:</h2>
            <form id="form_createTournament" action="javascript:void(0);">
                <label>Turniername:</label>
                <input type="text" name="tf_tournamentName" placeholder="Name" required/>
                <label>Passwort:</label>
                <input type="password" name="tf_password" placeholder="Passwort" required/>
                <div id="competitorsList">
                    <label>Teilnehmer 1</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 2</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 3</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 4</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 5</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 6</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 7</label>
                    <input type="text" placeholder="Name" />
                    <label>Teilnehmer 8</label>
                    <input type="text" placeholder="Name" />
                    <!-- weitere Inputfelder per JS eingefügt -->
                </div>
                <button type="button" id="btn_addCompetitor"><span class="glyphicon glyphicon-plus"></span> Spieler Hinzufügen</button>
                <button type="submit">Turnier erstellen</button>
            </form>
        </div>
        </script>
        <script type="text/template" id="template-tableView">
        <div id="tableView">
            <% _.each(rc.rounds, function(round) { %>
            <table class="GameTable" id="<%= round.roundname %>">
                <caption><%= round.roundname %></caption>
                <tbody>
                    <% _.each(round.games, function(game) { %>
                    <tr number="<%= game.number %>">
                        <td rowspan="2"><%=(parseInt(game.number) + 1) %></td>
                        <td><%= game.player1 %></td>
                        <td style="width:5px"></td>
                        <td><%= game.player2 %></td>
                    </tr>
                    <tr number="<%= game.number %>">
                        <td><%= game.score1 == -1 ? 'N/A' : game.score1 %></td>
                        <td style="width:5px">:</td>
                        <td><%= game.score2 == -1 ? 'N/A' : game.score2 %></td>
                    </tr>
                    <% }); %>
                </tbody>
            </table>
            <% }); %>
        </div>
        </script>
        <script type="text/template" id="template-treeView">
        <div id="treeView">
        </div>
        </script>
        <script type="text/template" id="template-rankingView">
        <div id="rankingView">
                <table id="platzTable">
                    <caption>Platzierung</caption>
                    <thead>
                        <tr>
                            <th>Platz</th>
                            <th>Spieler</th>
                        </tr>
                    </thead>
                <tbody>
                    <% _.each(rc.list, function(position) { %>
                        <tr>
                            <td><%= position.ranking %></td>
                            <td><%= position.player %></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
        </script>
        <script type="text/template" id="template-editView">
        <div id="editView">
            <div id="editGame">
            <p>Wähle ein Spiel</p>
                <select id="gamesSelection">
                    <option value="-1" <%= !rc.game ? 'selected' : ''%>>Spiel wählen...</option>
                    <% _.each(rc.gamenumbers, function(gamenumber) { %>
                    <option value="<%= gamenumber %>" <%= (rc.gamenumber == gamenumber) ? 'selected' : '' %>>Spiel <%= (gamenumber + 1) %></option>
                    <% }); %>
                </select> <br/>
                <% if(!rc.game){ %>
                <% } else if(!rc.editable){ %>
                <p class="help-block">Spiel Kann nicht bearbeitet werden.</p>
                <% } %>
                <label id="firstEditLabel" for="scoreP1"><%= rc.game ? rc.game.player1 : 'Spieler 1' %></label>
                <label for="scoreP2"><%= rc.game ? rc.game.player2 : 'Spieler 2' %></label><br/>
                <input type="number" pattern="[0-9]*" <%
                if(rc.game && rc.game.score1 > -1){
                %> value="<%= rc.game.score1 %>"<%
                } %> id="scoreP1" <%= !rc.editable ? 'disabled' : '' %> /> <span id=editVs>:</span>
                <input type="number" pattern="[0-9]*" <%
                if(rc.game && rc.game.score2 > -1){
                %> value="<%= rc.game.score2 %>"<%
                } %> id="scoreP2" <%= !rc.editable ? 'disabled' : '' %> />
            </div>
            <button type="button" id="btn_setScore" <%= rc.editable ? '' : 'disabled'%>>Ergebnis speichern</button>
        </div>
        </script>
        <script type="text/template" id="template-waitView">
            <p>Bitte warten</p>
        </script>
</body>
</html>